<!DOCTYPE html>
<html>
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Login Example - Semantic</title>
    <link rel="stylesheet" type="text/css" href="/css/semantic.min.css">
    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/js/semantic.min.js"></script>
    <script>
        $(document)
            .ready(function() {
                $('.ui.form')
                    .form({
                        fields: {
                            email: {
                                identifier  : 'email',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : 'Please enter your e-mail'
                                    },
                                    {
                                        type   : 'email',
                                        prompt : 'Please enter a valid e-mail'
                                    }
                                ]
                            },
                            password: {
                                identifier  : 'password',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : 'Please enter your password'
                                    },
                                    {
                                        type   : 'length[6]',
                                        prompt : 'Your password must be at least 6 characters'
                                    }
                                ]
                            }
                        }
                    })
                ;
            })
        ;
    </script>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h1 style="color: #fff;"><b>学生管理系统</b></h1>
        <h2 class="ui teal image header">
            <img src="https://www.cqupt.edu.cn/dfiles/13011/cqupt/img/logo.jpg"  class="image" >
            <div class="content">
                请登陆你的账号
            </div>
        </h2>
        <form class="ui large form">
            <div >
                <div class="field">>
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="email" id="email" placeholder="E-mail address">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" id="password" placeholder="Password">
                    </div>

                </div>
                <div class="ui fluid large teal submit button" id="login">Login</div>
            </div>

        </form>

        <div class="ui message">
            <span>没有账号?</span><a href="registry.html" id="registry">前往注册</a>
        </div>
    </div>
</div>
<script type="text/javascript" charset="UTF-8">
    //登录
    $("#login").on("click",function() {
        $.ajax({
            url:"/user/login",
            type:"POST",
            data:{
                email: $("#email").val(),
                password: $("#password").val()
            },
            resultType:"JSON",
            success: function (result) {
                alert(result.message);
                if(result.code==200){
                    window.location.href="http://localhost:8089/index";

                }

            },
            error:function (result) {
                alert(result.message);
            }
        })
    })
</script>
</body>

</html>
